<!--分散式房源推广信息编辑表单-->
<template>
	<a-form ref="form" class="house-form-extra" :model="communityExtra" layout="vertical" :rules="roomExtraRules(communityExtra)">
		<a-typography-paragraph strong>
			<blockquote>项目配套</blockquote>
		</a-typography-paragraph>
		<a-row :gutter="16">
			<a-col :span="4">
				<a-form-item label="用水：">
					<a-select v-model:value="communityExtra.waterType" :options="waterTypeList" allow-clear placeholder="请选择" />
				</a-form-item>
			</a-col>
			<a-col :span="4">
				<a-form-item label="用电：">
					<a-select v-model:value="communityExtra.electricityType" :options="elecTypeList" allow-clear placeholder="请选择" />
				</a-form-item>
			</a-col>
			<a-col :span="4">
				<a-form-item label="燃气：">
					<a-select v-model:value="communityExtra.gasType" :options="gasTypeList" allow-clear placeholder="请选择" />
				</a-form-item>
			</a-col>
			<a-col :span="4">
				<a-form-item label="供暖：">
					<a-select v-model:value="communityExtra.heatingType" :options="heatingTypeList" allow-clear placeholder="请选择" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-typography-paragraph>
			<strong><blockquote style="display: inline-block">公区配置</blockquote></strong>

			<a class="blockquote" @click="onClickToEditDic('HOUSE@PUBAREACONFIG', '添加公区配置')">
				<plus-circle-outlined />
				添加
			</a>
			<a-checkbox :checked="visibles.dispose" @change="selectAll">全选</a-checkbox>
		</a-typography-paragraph>
		<a-form-item name="configs">
			<a-checkbox-group v-model:value="communityExtra.configs" style="width: 100%">
				<a-row :gutter="16">
					<a-col v-for="item in configs" :key="item.id" :xs="12" :sm="8" :md="6" :lg="4">
						<a-checkbox :value="item.id" class="dic-edit-checkbox">
							{{ item.name }}
							<a @click.prevent="onClickToEditDic('HOUSE@PUBAREACONFIG', '编辑公区配置', item)">
								<edit-outlined />
							</a>
						</a-checkbox>
					</a-col>
					<!-- <a-col :xs="12" :sm="8" :md="6" :lg="4">
						<a @click="onClickToEditDic('HOUSE@PUBAREACONFIG', '添加公区配置')">
							<plus-circle-outlined />
							添加
						</a>
					</a-col> -->
				</a-row>
			</a-checkbox-group>
		</a-form-item>
		<a-typography-paragraph strong>
			<blockquote>项目介绍</blockquote>
		</a-typography-paragraph>
		<a-form-item name="introduction">
			<a-textarea v-model:value="communityExtra.projectIntro" :maxlength="500" show-count placeholder="请输入项目介绍" />
		</a-form-item>
		<a-typography-paragraph strong>
			<blockquote>VR看房地址</blockquote>
		</a-typography-paragraph>
		<a-form-item name="vrUrl">
			<a-input v-model:value="communityExtra.vrUrl" type="url" :maxlength="500" show-count allow-clear placeholder="请输入VR看房地址" />
		</a-form-item>
		<a-typography-paragraph strong>
			<blockquote>项目图片</blockquote>
		</a-typography-paragraph>
		<a-form-item name="imgList">
			<file-upload v-model:files="communityExtra.imgList" :biz-id="community.id" :limit="24" accept=".jpg,.png,.jpeg" sub-type="houseImageTypes" />
		</a-form-item>
		<teleport to=".house-edit-dialog .ant-modal-footer">
			<a-button type="primary" :loading="loading.save" @click="saveCommunityExtra">保存</a-button>
		</teleport>
	</a-form>

	<dic-edit-dialog v-model:visible="visibles.dic" :value="dic" @close="getDics" />
</template>

<script lang="ts" setup>
	import {onMounted, reactive, ref} from 'vue'
	import {elecTypeList, gasTypeList, heatingTypeList, waterTypeList} from '@/interface/house'
	import houseApi from '@/api/house-api'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {message} from 'ant-design-vue'
	import {EditOutlined, PlusCircleOutlined} from '@ant-design/icons-vue'
	import {Community, CommunityExtra} from '@/interface/community'
	import {Dic} from 'yuxin-base/src/types'
	import {DIC_PID_MAP} from 'yuxin-base/src/constant'
	import {roomExtraRules} from '@/rules/community'
	import {FormInstance} from 'ant-design-vue/lib/form/Form'
	import FileUpload from '@/components/common/file-upload.vue'
	import {computed} from 'vue'

	const props = defineProps<{
		value: Community
	}>()

	const loading = reactive({
		save: false,
		load: false
	})

	const visibles = reactive({
		dic: false,
		dispose: computed(() => {
			return configs.value.length === communityExtra.value?.configs?.length
		})
	})
	const timerNumber = ref<any>(null)

	const activeKey = ref<string[] | string>('loading')
	const community = reactive<Community>(props.value)
	const communityExtra = ref<CommunityExtra>({})

	// 项目配套设施
	const configs = ref<Dic[]>([])

	const getDics = () => {
		settingApi.getDicListByPid(DIC_PID_MAP['HOUSE@PUBAREACONFIG']).then(({data}) => (configs.value = data))
	}

	onMounted(() => {
		getDics()

		if (community.id) {
			loading.load = true
			// 获取扩展信息
			houseApi
				.getProjectExtraInfo(community.id)
				.then(({data}: {data: CommunityExtra}) => {
					console.log(data, '99')
					communityExtra.value = data
					communityExtra.value.communityId = community.id
					// 配套设施回显
					communityExtra.value.configs = (data.infrastructureList || []).map(c => c.id) as []
				})
				.finally(() => (loading.load = false))
		}
	})

	/**
	 * 添加字典
	 */
	const dic = ref<Dic>()
	const onClickToEditDic = (label: string, title: string, item?: any) => {
		visibles.dic = true
		dic.value = {
			label,
			title,
			isUse: 1,
			...item,
			pid: DIC_PID_MAP[label]
		}
	}

	const form = ref<FormInstance>()
	/**
	 * 保存房源推广信息
	 */
	const saveCommunityExtra = () => {
		form.value?.validate().then(() => {
			loading.save = true
			communityExtra.value.infrastructureList = configs.value.filter(o => communityExtra.value.configs?.includes(o.id as string))
			houseApi
				.saveProjectExtraInfo(communityExtra.value)
				.then(() => {
					message.success('保存成功')
				})
				.finally(() => (loading.save = false))
		})
	}
	// 全选

	const selectAll = ({target: {checked}}) => {
		if (checked) {
			communityExtra.value.configs = configs.value.map((e: any) => e.id)
		} else {
			communityExtra.value.configs = []
		}
	}
</script>

<style lang="less" scoped>
	.house-form-extra {
		margin: 16px 0;

		.dic-edit-checkbox span + span > a {
			display: none;
		}

		.dic-edit-checkbox:hover span + span > a {
			display: inline;
		}

		.blockquote {
			margin: 0 10px;
		}
		.checkBox {
			span {
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	}
</style>
